<template>
  <div>
    <div class="title-background">
      <div style="color: white;font-size: 25px;float: left;margin-top:10px;margin-left: 30px;
      cursor: pointer" @click="$router.push('/')">
        <i style="color: #9dc15b;font-size: 35px;">
          NC
        </i>
        <span>深度学习平台</span>
      </div>
      <div v-if="!hideSign && !username" class="title-right" @click="$router.push('/user')">
        登 录
      </div>
      <div v-if="!hideSign && !username" class="title-right" @click="$router.push('/user?is_register=1')">
        注 册
      </div>
      <div v-if="username" class="title-right">
        <el-dropdown >
          <span style="color: white;font-size: 18px;">
            您好,{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu style="background-color: #333333;border: none;margin-top: 20px;" slot="dropdown">
            <el-dropdown-item @click.native="changeLogin()">切换登录</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/user?is_register=1')">注册</el-dropdown-item>
            <el-dropdown-item @click.native="logout()">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-if="!hideSign" class="title-right" @click="$router.push('/stars')">
        收 藏
      </div>
      <div v-if="!hideSign" class="title-right" @click="$router.push('/my')">
        我 的
      </div>
      <div v-if="!hideSign" class="title-right" @click="$router.push('/public')">
        公 开
      </div>
      <div v-if="!hideSign" class="title-right" @click="$router.push('/example')">
        示 例
      </div>
<!--#9dc15b-->
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props:{
    hideSign:false,
  },
  data(){
    return{
      username:localStorage.getItem("username")
    }
  },
  methods:{
    logout(){
      localStorage.clear();
      location.reload();
    },
    changeLogin(){
      localStorage.clear();
      this.$router.push('/user')
    }
  }
}
</script>

<style scoped>
.el-popper /deep/.popper__arrow::after {
  content: none;
}
.el-popper /deep/.popper__arrow {
  border: 0;
}
/deep/.el-dropdown-menu {
  border:none;
  color:#666;
  background-color: #333333;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/deep/ .el-popper{
  background-color: #333333;
}
/deep/.el-dropdown-menu__item{
  background-color: #333333;
  color: white;
}
/deep/.el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #333333;
  color:#9dc15b;
}



.title-background{
  height: 60px;
  background-color: #333333;
  padding-right: 50px;
}
.title-right{
  color: white;
  float:right;
  font-size: 18px;
  margin-right: 50px;
  margin-top: 20px;
  cursor: pointer;
}
.title-right:hover{
  color: #9dc15b;
}
</style>